<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../../css/btnplus.css" />
		<style type="text/css">
			html,body{
				background-color: #fff;
				overflow-y: auto;
				-webkit-overflow-scrolling:touch;
			}
			.car_insure_info{ background-color:#fff;}
			.car_insure_info .tab{ height: 45px; background-color: #fff; position: relative;}
			.car_insure_info .tab::after{ position:absolute; content: ""; left: 0; right: 0; bottom: 0; border-bottom: 1px #d5d5d5 solid; transform: scaleY(0.5);}
			.car_insure_info .tab a{ float: left; width: 33.33%; text-align: center; font-size: 14px; color: #333; line-height: 45px; position: relative;}
			.car_insure_info .tab a:hover,.car_insure_info .tab a.on{ color:#1c63fa; background-color: transparent;}
			.car_insure_info .tab a:hover::after,.car_insure_info .tab a.on::after{ position: absolute; content: ""; left: 50%; margin-left: -10px; bottom: 0; width: 20px; border-bottom: 1px #1c63fa solid; z-index: 2;}
			.car_insure_info .list{ padding: 10px 10px 50px;}
			.car_insure_info table{ background-color: #f6fbff; border-radius: 4px; width: 100%; font-size: 13px; color: #333; text-align: center; line-height: 25px; padding: 10px 0;}
			
			.car_list{ padding: 10px 15px 20px;}
			.car_list li{ position: relative; background-color:#F7F9FC; margin-bottom: 10px; padding: 15px 15px; border-radius: 4px; color: #202532; overflow: hidden;}
			.car_list span{ display:block; font-size: 12px; color:#808080; padding: 7px 0 3px; }
			.car_list b{ display: block; font-size: 12px; font-weight: normal; color: #808080; line-height: 16px;}
			.car_list div{ font-size: 12px; color: #fff; line-height: 20px; width: 93px; text-align: center; background-image: url(../../image/img_50.png); background-size: 100% auto;}
			.car_list p{ position:absolute; right: 15px; bottom: 33px; font-size: 12px; color: #9f9f9f; line-height: 20px; text-align: right;}
			.car_list em{ display:block; font-size: 15px; padding-bottom: 7px;}
			.c_01{ color:#3262F1;}
			.c_02{ color:#F6AA42;}
			.c_03{ color:#4F9A7C;}
			.c_04{ color:#CF4242;}
			.car_list li.on_01 div,.car_list li.on_02 div{ background-image: url(../../image/img_49.png);}
			.car_list li.on_01,.car_list li.on_01 b{ color:#9f9f9f;}
			.car_list li.on_02,.car_list li.on_02 b,.car_list li.on_02 p{ color:#c4c4c4;}

			.sk-three-bounce {
			  margin: 0 auto;
			  width: 80px;
			  text-align: center; }
			  .sk-three-bounce .sk-child {
				width: 13.5px;
				height: 13.5px;
				background-color: #3262F1;
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
						animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
			  .sk-three-bounce .sk-bounce1 {
				-webkit-animation-delay: -0.32s;
						animation-delay: -0.32s; }
			  .sk-three-bounce .sk-bounce2 {
				-webkit-animation-delay: -0.16s;
						animation-delay: -0.16s; }

			@-webkit-keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); } }

			@keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); }
			}
			.more{ padding: 1.20rem 0; text-align: center; font-size: 0.26rem; color: #999; line-height: 0.60rem;}
			.display-none{ display:none; }
			.text-center { text-align: center !important; }
		</style>
	</head>
	<body>
		<div id="result">
		<div class="car_insure_info">
			<ul class="car_list" id="insurelist">
			</ul>
			<script id="insurelist_template" type="text/template">
				{{ for (var i = 0, len = it.length; i < len; i++) { }}
				<li tapmode="lipress" onclick="openInsureDetail({{=it[i].id}},{{=it[i].status}});">
					<div>{{=it[i].carnum}}</div>
					<span>申请时间：{{=it[i].createtime}}</span>
					<b>生效时间：{{=it[i].insurestarttime}} - {{=it[i].insureendtime}}</b>
					
					<p><em class="c_0{{=it[i].status}}">{{=it[i].state}}</em></p>
				</li>
				{{ } }}
			</script>
		</div>
		</div>
		<div class="text-center display-none" style="padding: 50px 0 !important;" id="divnodata">
			<div class="text-center"><img src="../../image/noinsure.png" style="margin:0 auto;width:41px;height:auto;"></div>
			<p class="text-center" style="font-size:12px;color:#9f9f9f;margin-top:15px;">您暂未办理车辆联保</p>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/app.js"></script>
	<script type="text/javascript" src="../../script/doT.js"></script>
	<script type="text/javascript">
		var page = 1;
		var UILoading;
		apiready = function() {
			api.parseTapmode();
			UILoading = api.require('UILoading');
			$api.css($api.dom('#result'), 'display: none');
			showloading();
			getJsonFromAPI();
			api.addEventListener({
				name:"refreshinsure"
			},function(ret,err){
				refreshPage();
			});
			api.addEventListener({
				name : 'reloadpage'
			}, function(ret, err) {
				refreshPage();			
			});
		}
		function openInsureDetail(insureid,status) {
			if(status != 6) {
				openNavWin('#fff','myinsuredetail_win','myinsuredetail_frm.html','车辆联保',false,false,true,[],{insureid:insureid});
			}
		}
		function refreshPage() {
			page = 1;
			getJsonFromAPI();
		}
		function getJsonFromAPI() {
			//从接口获取查询数据
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/insure/'+page,
						method: 'get',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						}
					}, function(ret, err) {
						//api.refreshHeaderLoadDone();
						hideloading();
						$api.css($api.dom('#result'), 'display: block');
						if (ret) {
							
							if(ret.list.length > 0)
							{
								$api.addCls($api.byId('divnodata'),'display-none');
								var isAppend = true;
								if(page==1)
								{
									isAppend = false;
								}
								page++;
								var insurelist = ret.list;
								UpdateList('insurelist','insurelist_template',insurelist,isAppend);
							}
							else
							{
								if(page==1)
								{
									UpdateList('insurelist','insurelist_template',ret.list,false);
									$api.removeCls($api.byId('divnodata'),'display-none');
								}
							}
							
						} else {
							if(err.statusCode==402)
							{
								Relogin();
							}
							else
							{
								console.log(JSON.stringify(err));
								toast('网络异常');
							}
						}
					});
				}
			});
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata,isAppend) {
			//console.log(JSON.stringify(jsondata));
			var act_content = $api.byId(domId);
			var tempFn = doT.template($api.byId(templateId).innerHTML);
			var resultText = tempFn(jsondata);
			//alert(isAppend);
			console.log(resultText);
			if(isAppend)
			{
				$api.append(act_content, resultText);
			}
			else
			{
				$api.html(act_content, resultText);
			}
			api.parseTapmode();
		}
	</script>
</html>